<template>
	<scroll-view @scrolltolower="scrolltolower" :refresher-enabled="true" :scroll-y="true" class="list-con">
		<uni-list class="list">
			<uni-list-item :clickable="true" @click="goto(item)" v-for="(item,index) in value" :key="index"
				class="row-warpper">
				<template v-slot:body>
					<view class="col-warpper title-con">
						<view class="title">{{makeTitle(item)}}</view>
						<view class="note">{{makeNote(item)}}</view>
						<!-- <view v-show="item.selectmode !== 13" class="status-con row-warpper">
							<view class="status">{{stateArr[item.state]}}</view>
							<view class="time-info col-warpper">
								<view>
									报名时间：{{ makeTime(item.bmstarttime) }}
									~ {{ makeTime(item.bmendtime)}}
								</view>
								<view>
									选取时间：{{makeTime( item.yaohaostartdate) }}
									~ {{makeTime( item.yaohaodate) }}
								</view>
							</view>
						</view> -->
					</view>
				</template>
				<template v-slot:footer>
					<view class="footer col-warpper">
						<view>{{makeTime(item.create_time)}}</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
	</scroll-view>
</template>

<script>
	import adcode from "@/common/util/adCode.js"
	export default {
		props: ["value"],
		data() {
			return {
				stateArr: ["未开始", "报名中", "选取中", "已结束"],
			}
		},
		methods: {
			/**
			 * 翻页
			 */
			scrolltolower() {
				this.$emit("scrolltolower")
			},
			/**
			 * 处理时间数据
			 * @param {Object} time
			 */
			makeTime(time) {
				if (typeof(time) !== "string") {
					return ""
				}
				return time.split(" ")[0]
				// return time
			},
			/**
			 * 处理标题
			 * @param {Object} record
			 */
			makeTitle(record) {
				const qybc = adcode[record.qybm]
				return "【" + qybc + "】" + " " + record.title
			},
			/**
			 * 处理副标题
			 * @param {Object} record
			 */
			makeNote(record) {
				return "业务类型:" + record.cat + " | " + "选取方式:" + this.XQFS[record.selectmode]
			},
			/**
			 * 页面跳转
			 * @param {Object} item
			 */
			goto(item) {
				uni.navigateTo({
					url: 'detail?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="less">
	.list-con {
		height: 90vh;
		justify-content: space-between;
		background: #ffffff;
		align-self: stretch;

		.list {
			justify-content: space-between;

			.title-con {
				width: 85vw;
				align-items: stretch;

				.status-con {
					background-color: #e9f3eb;
					align-self: flex-start;

					view {
						padding: 2px;
						font-size: 12px;
					}

					.status {
						padding: 5px 10px;
						background-color: #58ac61;
						color: #fff;
					}

					.time-info {
						padding: 5px;

						view {
							font-size: 4px;
						}
					}
				}

				.note {
					color: #ccc;
					font-size: 12px;
					margin: 5px 0;
				}
			}

			.footer {
				width: 25vw;
				justify-content: flex-start;
			}
		}
	}
</style>
